<template>
  <view class="page">
    <view class="page-bd">
      <CardView type="box">
        <view class="cover-up-form">
          <up-form :model="form" ref="uFormRef" :rules="rules">
            <up-form-item
              label="姓名"
              prop="userInfo.name"
              borderBottom
              ref="item1"
            >
              <up-input v-model="form.storehouse" border="none"></up-input>
            </up-form-item>
            <up-form-item
              label="性别"
              prop="userInfo.sex"
              borderBottom
              @click="showSex = true;"
              ref="item1"
            >
              <up-input
                v-model="form.storehouse"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择性别"
                border="none"
              ></up-input>
              <template #right>
                <up-icon name="arrow-right"></up-icon>
              </template>
            </up-form-item>
          </up-form>
        </view>

        <!-- 盘点任务 -->
        <FormItemView
          :config="{type: 'link', required: true}"
          :data="{ label: '仓库', text: form.storehouse }"
        ></FormItemView>
        <view class="ui-line"></view>
        <FormItemView
          :config="{type: 'link', required: true}"
          :data="{ label: '商品名称', text: form.goodName }"
          @onLink="$tab.navigateTo(ROUTE.PAGE_APPS.CHOOSE_GOODS_INDEX, {'chooseType': 'single'})"
        ></FormItemView>
        <view class="ui-line"></view>
        <FormItemView
          :config="{type: 'space-between', required: true}"
          :data="{ label: '商品编码', text: form.goodCode }"
        ></FormItemView>
        <view class="ui-line"></view>
        <FormItemView
          :config="{type: 'space-between'}"
          :data="{ label: '品牌', text: form.brand }"
        ></FormItemView>
        <view class="ui-line"></view>
        <FormItemView
          :config="{type: 'space-between'}"
          :data="{ label: '规格', text: form.spec }"
        ></FormItemView>
      </CardView>
    </view>
    <view class="page-ft">
      <view
        class="ui-button button-style--primary button-size--large"
        @tap="handleSubmit"
        >确定</view
      >
    </view>

    <!-- 选择仓库 -->
    <view class="select-store-dialog cover-up-action-sheet">
      <up-action-sheet
        :show="showSex"
        :actions="[  
            { name: '男' },  
            { name: '女' },  
            { name: '保密' },  
          ]"
        title="请选择性别"
        description="如果选择保密会报错"
        @close="showSex = false"
        @select="sexSelect"
      >
      </up-action-sheet>
    </view>
  </view>
</template>

<script setup>
import CardView from '@/components/base-components/card-view/card-view.vue';
import FormItemView from '@/components/base-components/form-item-view/form-item-view';
import { ROUTE } from '@/constant/constant';

const showSex = ref(false);

const data = reactive([
  {
      name: 'storehouse',
      value: 1,
      label: '仓库',
      text: '仓库1号',
    },
    {
      name: '',
      text: '华为',
      value: 2,
    }
]);

const form = reactive({
  storehouse: '仓库1号',
  goodName: '华为',
  goodCode: '123456',
  brand: '华为',
  spec: '华为',
});


{
  spec: {}
}
</script>

<style scoped lang="scss">
@import "@/static/scss/theme.scss";


.page {
  height: 100vh;
  background-color: #F4F8FB;
  // padding: 16rpx 24rpx;
  display: flex;
  flex-direction: column;

  &-bd {
    flex: 1;
    overflow-y: auto;
    padding: 16rpx 24rpx;
  }

  // ::v-deep {
  //   .card-view {
  //     padding: 0 32rpx;
  //   }
  //   .form-item-view {
  //     justify-content: space-between;
  //     height: 96rpx;
  //     font-size: 26rpx;
  //     display: flex;
  //     align-items: center;

  //     & + .form-item-view {
  //       border-top: 1px solid $border-color;
  //     }
  //   }
  // }

  ::v-deep .form-item-view {
    height: 104rpx;
  }

  &-ft {
    padding: 20rpx 32rpx;

    .ui-button {
      flex: 1;
    }
  }
  // 选择弹窗
  .select-store-dialog {

  }

}
</style>
